<template>
  <UView name="设备" urlAuth>
    <UViewSearch v-model="searchModel">
      <URow col="search">
        <UInput field="name" label="设备名称" :allowClear="true" />
        <UTreeSelect field="deviceTypeId" label="设备类型" :allowClear="true"
          url="/iot/deviceType/tree?alias=PLC" labelField="name" valueField="id"/>
        <USelect field="status" label="设备状态" dict="iot_device_status" :allowClear="true" />
        <UInput field="deviceSn" label="设备编号" :allowClear="true" />
        <UFuncBtn func="query" url="/iot/plc/view">搜索</UFuncBtn>
        <UFuncBtn func="reset">重置</UFuncBtn>
        <UFuncBtn func="add" url="/iot/plc/add">新增</UFuncBtn>
      </URow>
    </UViewSearch>
    <UViewModal title="PLC设备管理" :span="[7, 14]" v-model="editModel" :rules="rules">
      <template #default="{model}">
        <UInput field="name" label="设备名称" />
        <UInput field="ip" label="设备ip" />
        <UInputNumber field="port" label="设备端口" :defaultValue="102" />
        <UInput field="deviceSn" label="设备编号" />
        <UTreeSelect field="deviceTypeId" label="设备类型"
          url="/iot/deviceType/tree" labelField="name" valueField="id" />
        <USelect field="model" label="plc型号" :options="PlcModel" />
      </template>
      <template #footer="{model}">
        <UFuncBtn func="cancel">取消</UFuncBtn>
        <UFuncBtn func="submit" url="/iot/plc/saveOrUpdate" :urlAuth="false"
                  v-auth:or="['iot:plc:add', 'iot:plc:edit']">提交</UFuncBtn>
        <UFuncBtn func="reset">重置</UFuncBtn>
      </template>
    </UViewModal>
    <UViewTable :columns="columns" :scroll="{x: 1200}">
      <template #status="{record, value}">
        <a-badge v-if="record.status=='online'" status="processing" :text="value" />
        <a-badge v-else status="warning" :text="value" />
      </template>
      <template #action="{record}">
        <UFuncTag func="edit" :data="record" url="/iot/plc/edit">修改</UFuncTag>
        <UFuncTag func="del" :data="record" url="/iot/plc/del">删除</UFuncTag>
        <UFuncTag func="edit:set" eid="debug" :data="record" url="/iot/plc/debug">调试</UFuncTag>
      </template>
    </UViewTable>
    <UFormDrawer uid="debug" v-model="debugModel" :title="'DTU设备调试 ('+debugModel.deviceSn+')'" :span="[7, 14]" width="70%">
      <span></span>
    </UFormDrawer>
  </UView>
</template>
<!-- 设备功能 -->
<script>
import {ref, reactive} from "vue";
export default {
  name: "PLCDevice",
  setup() {
    let PlcModel = [
      {label: 's7-200', value: "S200"},
      {label: 's7-300', value: "S300"},
      {label: 's7-400', value: "S400"},
      {label: 's7-700', value: "S700"},
      {label: 's7-1200', value: "S1200"},
      {label: 's7-1500', value: "S1500"},
      {label: 's7-200Smart', value: "S200Smart"},
    ]
    let columns = ref([
      {field: "name", title: "设备名称", width: 200},
      {field: "deviceSn", title: "设备编号", width: 200},
      {field: "deviceTypeId", title: "设备类型", url: '/iot/deviceType/tree'},
      {field: "ip", title: "设备ip", width: 160},
      {field: "port", title: "设备端口", width: 80},
      {field: "model", title: "设备型号", width: 100},
      {field: "createTime", title: "创建时间", type: 'date', format: 'YYYY-MM-DD'},
      {field: "status", title: "设备状态", dict: 'iot_device_status'},
      {field: 'action', title: '操作'},
      ]);

    let rules = reactive({
      name: {required: true, message: '设备名称必填'},
      ip: {required: true, message: 'ip地址必填'},
      port: {required: true, message: '端口必填'},
      status: {required: true, message: '设备状态必填'},
      deviceSn: {required: true, message: '设备编号必填'},
      deviceTypeId: {required: true, message: '设备类型必填'},
    })

    let debugModel = ref({});
    let editModel = ref({});
    let searchModel = ref({});
    return {columns, rules, editModel, searchModel, PlcModel, debugModel}
  },
}
</script>
<style scoped> </style>